<template>
  <div class="address_list">
    <div class="td">
      选择地址 <van-icon name="cross" @click="closeAddress" />
    </div>
    <ul class="dd_com">
      <li
      v-for="item,i in list" :key="i"
      >
        <div :class="['dd_item',address_id == item.id ? 'active' : '']"  @click="clickChange(item)">
          <div class="icon">
            <van-icon name="location-o" />
          </div>
          <div class="info">
            <div class="info_td">{{item.real_name}}&nbsp;&nbsp;&nbsp;{{item.phone}}</div>
            <div class="info_dd">{{item.province+item.city+item.district+item.detail}}</div>
          </div>
          <div class="yes">
            <van-icon name="success" />
          </div>
        </div>
      </li>
    </ul>
    <div class="add">
      <a href="#/user/add_address"> 新加地址 </a>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
        }
    },
    created(){
        this.initAddressList()
    },
    props:{
        is_default:{
            type:Number
        },
        address_id:{
            type:Number
        },
        is_select:{
            type:Boolean
        }
    }
    ,
     methods: {
    closeAddress() {
      this.$emit("closeAddress", false);
    },
    initAddressList() {
      let url = "/api/address/list";
      let token = localStorage.getItem("token");
    //   let data = {
    //     cartId: this.$route.params.id,
    //   };
      let pro = axios({
        method: "get",
        url: url,
        // data: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          let { status, data } = res.data;
          if (status == 200) {
            

            this.list = data
          }

          console.log("获取成功", res.data);
        })
        .catch((err) => {
          console.log("数据失败");
        });
    },

    clickChange(item){
        this.$emit('change-address',item)
        console.log("xxx",item)
    },

    // tabList(id,ele){
    //     // 排他
    //     this.list.forEach(item=>{
    //         item.is_select = false
    //     })

    //     this.list.forEach(item=>{
    //         if(item.id == id){
    //             item.is_select = true
    //         }
    //     })

    //     this.clickChange(ele)
    // }
  },
};
</script>

<style lang="scss" scoped>
.address_list {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  .td {
    height: 60px;
    line-height: 60px;
    font-size: 17px;
    color: #333;
    text-align: center;
    font-weight: 700;
    position: relative;
    i {
      position: absolute;
      font-size: 26px;
      top: 50%;
      transform: translateY(-50%);
      right: 12px;
      color: #8a8a8a;
    }
  }

  .dd_com {
    padding-left: 15px;
    li {
      border-bottom: 1px solid #eee;
      padding: 8px 0;
      .dd_item {
        width: 100%;
        display: flex;
        height: 50px;
        color: #282828;
        align-items: center;
        position: relative;
        .icon {
          font-size: 18px;
          margin-right: 12px;
        }
        .info {
          .info_td {
            font-weight: 700;
            font-size: 14px;
          }
          .info_dd {
            margin-top: 1px;
            font-size: 14px;
          }
        }

        .yes {
          position: absolute;
          font-size: 19px;
          top: 50%;
          transform: translateY(-50%);
          right: 20px;
          color: #fc4141;
          display: none;
        }
      }

      .dd_item.active {
        color: #fc4141;
      }

      .dd_item.active .yes {
        display: block;
      }
    }
  }

  .add {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    margin: 40px 0 40px;
    a {
      display: block;
      background-color: #fc4141;
      color: #fff;
      width: 100%;
      height: 100%;
      line-height: 50px;
      border-radius: 25px;
      text-align: center;
      font-size: 15px;
    }
  }
}
</style>

